<template>
    <div class="bar-chart-container">
        <!-- <span class="unit">单位：{{ unit }}</span>
        <div class="view-switch">
          <button 
            v-for="item in viewOptions" 
            :key="item.value" 
            :class="{ active: currentView === item.value }"
            @click="switchView(item.value)"
          >
            {{ item.label }}
          </button>
      </div> -->
      <!-- 图表容器 -->
      <div ref="chartRef" class="chart-container"></div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    name: 'TrendBarChart',
    props: {
      // 数据源：按天/周/月的结构，格式为 { day: {xAxis: [...], yAxis: [...]}, ... }
      dataSource: {
        type: Object,
        required: true,
        default: () => ({
          day: {
            xAxis: ['09-28', '09-29', '09-30', '10-01', '10-02', '10-03', '10-04', '10-05', '10-06', '10-07', '10-08', '10-09', '10-10', '10-11', '10-12', '10-13', '10-14'],
            yAxis: [45000, 75000, 60000, 30000, 55000, 18000, 100000, 18000, 55000, 55000, 75000, 100000, 55000, 60000, 45000, 85000, 55000]
          },
          week: {
            xAxis: ['第1周', '第2周', '第3周', '第4周'],
            yAxis: [150000, 120000, 180000, 160000]
          },
          month: {
            xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
            yAxis: [350000, 420000, 380000, 450000, 410000, 480000]
          }
        })
      },
      // 数据单位（默认“次”）
      unit: {
        type: String,
        default: '次'
      }
    },
    data() {
      return {
        chartInstance: null, // ECharts实例
        currentView: 'day', // 当前视图（天/周/月）
        viewOptions: [
          { label: '按天', value: 'day' },
          { label: '按周', value: 'week' },
          { label: '按月', value: 'month' }
        ]
      };
    },
    mounted() {
      this.initChart();
      window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
      if (this.chartInstance) {
        this.chartInstance.dispose();
      }
      window.removeEventListener('resize', this.handleResize);
    },
    methods: {
      // 初始化图表
      initChart() {
        const chartDom = this.$refs.chartRef;
        if (!chartDom) return;
  
        this.chartInstance = echarts.init(chartDom);
        this.updateChart();
      },
      // 更新图表数据与配置
      updateChart() {
        const { xAxis, yAxis } = this.dataSource[this.currentView];
        // const { unit } = this;
  
        // 柱状图渐变颜色（蓝紫垂直渐变）
        const barColor = new echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(90, 105, 255, 0.8)' },
            { offset: 1, color: 'rgba(200, 100, 255, 0.2)' }
          ],
          false
        );
  
        const option = {
          backgroundColor: '#fff',
          tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '10%', // 预留dataZoom滑块空间
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: xAxis,
            axisLine: { lineStyle: { color: '#D9D9D9' } },
            axisLabel: { textStyle: { color: '#666' } }
          },
          yAxis: {
            type: 'value',
            // name: `单位：${unit}`,
            nameTextStyle: { color: '#666', fontSize: 12 },
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { lineStyle: { type: 'dashed', color: '#E9E9E9' } },
            axisLabel: { textStyle: { color: '#666' } }
          },
          series: [
            {
              type: 'bar',
              barWidth: '60%', // 柱状图宽度
              itemStyle: { color: barColor },
              data: yAxis
            }
          ],
          // 数据缩放（鼠标滚轮+底部滑块双交互）
        //   dataZoom: [
        //     {
        //       type: 'inside',
        //       start: 0,
        //       end: 100,
        //       enableMouseWheel: true,
        //       enableDrag: true,
        //       filterMode: 'filter'
        //     },
        //     {
        //       type: 'slider',
        //       bottom: 20,
        //       start: 0,
        //       end: 100,
        //       handleStyle: { color: '#fff', borderColor: '#8B5CFF' },
        //       trackStyle: { backgroundColor: '#f0f2f5' },
        //       filterMode: 'filter'
        //     }
        //   ]
        };
  
        this.chartInstance.setOption(option);
      },
      // 切换视图（重置缩放范围）
      switchView(view) {
        this.currentView = view;
        this.updateChart();
        this.chartInstance.setOption({
          dataZoom: [{ start: 0, end: 100 }, { start: 0, end: 100 }]
        });
      },
      // 窗口 resize 自适应
      handleResize() {
        if (this.chartInstance) {
          this.chartInstance.resize();
        }
      }
    }
  };
  </script>
  
  <style scoped>
  .bar-chart-container {
    width: 100%;
    height: 400px;
    position: relative;
  }
  

  .unit {
    position: absolute;
  top: 5px;
  z-index: 10;
  font-weight: 400;
  font-size: 18px;
  color: #999999;
  margin-left: 5px;
  }
  
  .view-switch {
    position: absolute;
    top: 0px;
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 10;
}

.view-switch button {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

.view-switch button.active {
    color: #327DFF;
    background: #F4F8FF;
    border-radius: 4px;
    border: 1px solid #327DFF;
}
  
  .chart-container {
    width: 100%;
    height: calc(100% - 60px); /* 减去头部高度 */
  }
  </style>